import { Image, StyleSheet, Platform ,TextInput, TouchableOpacity,ScrollView ,Modal } from 'react-native'
import React, { useState } from 'react';
import { Button, Input, CheckBox, Icon,  } from 'react-native-elements';
import { ThemedText } from '@/components/ThemedText'
import { ThemedView } from '@/components/ThemedView'
import { useRouter } from 'expo-router'
import useResponsive from '@/rem/rem'
const areas = {
  "河北省": {
    "石家庄市": ["长安区", "桥西区", "新华区"],
    "唐山市": ["路南区", "路北区", "古冶区"]
  },
  "北京市": {
    "北京市": ["东城区", "西城区", "朝阳区"]
  },
  // 添加更多省份、城市和区县
};
import axios  from 'axios'
export default function Add() {
  const { w, h, fs } = useResponsive()
  const router = useRouter()
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [idCard, setIdCard] = useState('');
  const [province, setProvince] = useState('');
  const [detailedAddress, setDetailedAddress] = useState('');
  const [status, setstatus] = useState(0);
  const [showDropdown, setShowDropdown] = useState(false); // 添加这行以初始化 showDropdown 状态
  const [city, setCity] = useState('');
  const [district, setDistrict] = useState('');
  const [currentLevel, setCurrentLevel] = useState('province'); // 控制当前显示哪一级别的选择

  const handleSave = async() => {
    let obj={
      name,
      phone,
      idCard,
      province,
      city,
      district,
      detailedAddress,
      status
    }
    let {data:{code}}=await axios.post('http://192.168.41.112:3000/addaddress',obj)
    if(code === 200){
      console.log('保存成功');
      router.push('/address/showads')
    }
    console.log('Saving address:', { name, phone, idCard,  province,city, district,detailedAddress, status });
  };

  // 假设这里有一个多级的数据结构 areas

  const handleSelect = (value) => {
    if (currentLevel === 'province') {
      setProvince(value);
      setCity('');
      setDistrict('');
      setCurrentLevel('city');
    } else if (currentLevel === 'city') {
      setCity(value);
      setDistrict('');
      setCurrentLevel('district');
    } else if (currentLevel === 'district') {
      setDistrict(value);
      setShowDropdown(false);
    }
  };

  const getCurrentOptions = () => {
    if (currentLevel === 'province') return Object.keys(areas);
    if (currentLevel === 'city') return Object.keys(areas[province]);
    if (currentLevel === 'district') return areas[province]?.[city];
    return [];
  };
  const styles= StyleSheet.create({
    container: {
      flex: 1,
      padding: 20,
    },
    title: {
      fontSize: 20,
      fontWeight: 'bold',
      marginBottom: 20,
    },
    saveButton: {
      backgroundColor: '#ff6f00',
      borderRadius: 30,
      marginTop: 20,
    },
    dropdown: {
      height: 50,
      backgroundColor: '#fff',
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'center',
      borderBottomWidth: 1,
      borderColor: '#ddd',
    },
    dropdownItem: {
      padding: 15,
      borderBottomWidth: 1,
      borderBottomColor: '#ddd',
    },
    dropdownText: {
      fontSize: 19,
      color: 'rgb(136, 149, 160)',
       marginLeft:-13,
      marginRight: 10,
    },
    dropdownContent: {
      width: '80%',
      marginTop:300,
      backgroundColor: '#fff',
      borderRadius: 5,
      overflow: 'hidden',
      
    },
    modalBackground: {
      flex: 1,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      justifyContent: 'center',
      alignItems: 'center',
    },
    container2:{
      width:w(325),
      height:h(70),
      padding: 15,
      borderBottomWidth: 1,
      borderBottomColor: 'rgb(136, 149, 160)',
      backgroundColor: '#fff',
     marginLeft:10,
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginBottom:10,
    },
    adr:{
      fontSize: 16,
      color: 'rgb(134, 147, 158)',
      marginLeft: 10,
      fontWeight: 'bold',
    }
  })
  return (
    <ThemedView style={styles.container}>
    

    <Input
      label="联系人"
      placeholder="请输入联系人姓名"
      value={name}
      onChangeText={setName}
    />

    <Input
      label="手机用户"
      placeholder="请输入手机号码"
      value={phone}
      onChangeText={setPhone}
      keyboardType="numeric"
    />

    <Input
      label="身份证号"
      placeholder="请输入身份证号码"
      value={idCard}
      onChangeText={setIdCard}
    />

    <Input
      label="联系电话"
      placeholder="请输入联系电话"
      value={phone}
      onChangeText={setPhone}
      keyboardType="numeric"
    />


<ThemedView >
  <ThemedText style={styles.adr}>所在地区</ThemedText>
  <ThemedView style={styles.container2}>
      {/* 省 */}
      <TouchableOpacity onPress={() => {setShowDropdown(true); setCurrentLevel('province')}}>
        <ThemedText style={styles.dropdownText}>{province || '请选择地址'}</ThemedText>
      </TouchableOpacity>

      {/* 市 */}
      <TouchableOpacity onPress={() => {if(province) {setShowDropdown(true); setCurrentLevel('city')}}}>
        <ThemedText style={styles.dropdownText}>{city || ''}</ThemedText>
      </TouchableOpacity>

      {/* 区/县 */}
      <TouchableOpacity onPress={() => {if(city) {setShowDropdown(true); setCurrentLevel('district')}}}>
        <ThemedText style={styles.dropdownText}>{district || ''}</ThemedText>
      </TouchableOpacity>

      {/* 下拉菜单 */}
      <Modal visible={showDropdown} transparent animationType="slide">
        <TouchableOpacity 
          style={styles.modalBackground} 
          activeOpacity={1} 
          onPress={() => setShowDropdown(false)}
        >
          <ScrollView contentContainerStyle={styles.dropdownContent}>
            {getCurrentOptions().map((option, index) => (
              <TouchableOpacity 
                key={index} 
                style={styles.dropdownItem} 
                onPress={() => handleSelect(option)}
              >
                <ThemedText style={styles.dropdownText}>{option}</ThemedText>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </TouchableOpacity>
      </Modal>
      </ThemedView>
    </ThemedView>
 
 

    <Input
      label="详细地址"
      placeholder="请输入详细地址"
      value={detailedAddress}
      onChangeText={setDetailedAddress}
    />

    <CheckBox
      center
      title="设置默认地址"
      checked={status==1}
      onPress={() => setstatus(status==1?0:1)}
    />

    <Button
      title="保存地址"
      buttonStyle={styles.saveButton}
      onPress={handleSave}
    />
  </ThemedView>
  )
}


